<template>
	<sl-page :isDisplay="false" :safeBottom="false" customStyle="background: #FAFBFF !important;">
		<view class="user">
			<!-- 头部 -->
			<view class="user-head">
				<view class="head-content">
					<view class="flex">
						<view class="content-profile">
							<view class="profile-headimg" v-if="user.headimg">
								<sl-image :value="user.headimg"></sl-image>
							</view>
							<view class="profile-avatar" v-else>
								<sl-image :value="avatar"></sl-image>
							</view>
						</view>
						<view class="flex flex-column m-l34" v-if="isLogin">
							<view class="content-name">
								{{user.name}}
							</view>
							<view class="flex">
								<!-- <view class="content-level">

								</view> -->
								<view class="content-member">
									<block v-if="member.vipName">
										{{member.vipName}}
									</block>
									<block v-else>
										会员名称
									</block>
								</view>
							</view>
						</view>
						<view class="p-1" @click="handleLogin()" v-else>
							<view class="p-1">请登录</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 会员卡 -->
			<view class="user-card">
				<view class="card-background">
					<view class="-bg">
						<sl-image v-model="vip.background" v-if="vip && vip.background"></sl-image>
						<image src="@/static/vipBackgrop.png" v-else></image>
					</view>
					<view class="card-data flex flex-x-between">
						<view class="flex card-show">
							<view class="card-level">
								<image v-if="isLogin" class="custom-icon userLevelCrown" src="@/static/userLevelCrown.png"></image>
								<image v-else class="custom-icon userIndexCrown" src="@/static/svg/userIndexCrown.svg"></image>
							</view>
							<view class="card-name">
								<block v-if="isLogin">
									<view class="" v-if="Object.keys(member).length === 0">
										<view>普通用户</view>
										<view class="f-24 py-1">付费升级 享受更多权益</view>
									</view>
									<view class="" v-else>
										<view>付费会员</view>
										<view class="f-24 py-1">{{member.endTime}} 到期</view>
									</view>
								</block>
								<block class="" v-else>
									<view class="f-24  py-1">登陆账号，尊享更多权益</view>
								</block>
							</view>
						</view>
						<view class="card-button" @click="toTargetMember()">续费升级
							<view class="form-box"></view>
						</view>
					</view>
				</view>
				<view class="card-category">
					<GridCategory ref="gridCategory" col="3" :datas="FFC" background="transparent"
						:showStyle="{up:{type:'showNumber'},down: {type: 'showText'}}" @gridCategory:click="toTargetFFC">
					</GridCategory>
				</view>
			</view>
			<!-- 订单 -->
			<view class="user-order">
				<view class="order-head" @click="toTargetOrder({ id: 1 })">
					<view class="f-w">我的订单</view>
					<view class="flex flex-y-center">
						<view class="f-24">全部订单</view>
						<uni-icons type="forward" size="13"></uni-icons>
					</view>
				</view>
				<view class="order-menu">
					<view v-if="orders.length>0" class="flex flex-column flex-y-center" @click="toTargetOrder(item)"
						v-for="(item, index) in orders" :key="index">
						<!-- <view class="">
							<uni-badge :text="item.count"></uni-badge>
						</view> -->
						<image class="custom-icon" :src="'../../static/svg/'+item.icon+'.svg'"></image>
						<view class="py-1">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<!-- 星橘服务 -->
			<view class="user-service">
				<view class="service-head">
					<view class="f-w">星橘服务</view>
				</view>
				<view class="service-menu">
					<view v-if="services.length>0" class="flex flex-column flex-y-center" @click="toTargetPage(item.url)"
						v-for="(item, index) in services" :key="index">
						<image class="custom-icon" :src="'../../static/svg/'+item.icon+'.svg'"></image>
						<view class="py-1">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<!-- 地址和设置 -->
			<view class="user-bottom">
				<view class="flex flex-x-between" @click="toTargetPage(pages.addressIndexPage)">
					<view class="flex flex-y-center">
						<image class="custom-icon" src="@/static/svg/icon-wode-dizhi.svg"></image>
						<text class="px-1">地址：</text>
					</view>
					<uni-icons type="forward" size="18"></uni-icons>
				</view>
				<view class="bottom-line"></view>
				<view class="flex flex-x-between" @click="toTargetPage(pages.configurationIndexPage)">
					<view class="flex flex-y-center">
						<image class="custom-icon" src="@/static/svg/icon-wode-shezhi.svg"></image>
						<text class="px-1">设置：</text>
					</view>
					<uni-icons type="forward" size="18"></uni-icons>
				</view>
			</view>
		</view>
	</sl-page>
</template>

<script>
	import MemberApi from '@/api/member/member.js';
	import MutilApi from '@/api/user/mutil.js';
	import UserApi from '@/api/user/index.js';
	import Constants from '@/constants';
	import Share from '@/utils/share.mixin.js';
	import GridCategory from '@/pages/components/category/category.vue';

	export default {
		name: 'userIndex',
		//
		mixins: [Constants, Share],
		//
		components: {
			GridCategory,
		},
		//
		data() {
			return {
				//跳转路径
				// distributionUrl: 'xj_distribution/index/index',
				// tenantUrl: 'xj_tenant/store/index',
				//用户昵称
				nickname: '',
				//正在加载
				isLoading: true,
				//是否已登录
				isLogin: false,
				//当前用户信息
				user: {},
				//当前用户会员信息
				member: {},
				//当前会员
				vip: {},
				//收藏，关注，卡券
				FFC: [],
				//订单
				orders: [],
				//星橘服务
				services: [],
				//我的相关
				todoRelates: {
					productCount: 0,
					tenantCount: 0,
					couponCount: 0
				},
				//订单相关
				todoCounts: {
					payment: 0,
					deliver: 0,
					received: 0,
					refund: 0
				}
			};
		},
		//
		watch: {
			// 'member.vipId': function() {
			// 	this.getVip();
			// },
		},
		//
		computed: {

		},
		//
		onLoad() {
			this.initFFCMenu();
			//初始化订单统计
			this.initOrderMenu();
			//初始化我的服务统计
			this.initServiceMenu();
		},
		//
		onShow() {
			// this.initFFCMenu();
			// //初始化订单统计
			// this.initOrderMenu();
			// //初始化我的服务统计
			// this.initServiceMenu();
			//
			this.onRefreshPage();
		},
		//
		methods: {
			//
			initFFCMenu() {
				this.FFC = [{
					id: '1',
					name: '收藏',
					url: 'xj_user/collection/index',
					thumbnail: 0,
					value: 'productCount'
				}, {
					id: '2',
					name: '关注',
					url: 'xj_user/follow/index',
					thumbnail: 0,
					value: 'tenantCount'
				}, {
					id: '3',
					name: '优惠券',
					url: 'xj_user/coupon/index',
					thumbnail: 0,
					value: 'couponCount'
				}];
			},
			//
			initOrderMenu() {
				const orderExt = [{
						icon: 'icon-daifukuan',
						count: 0
					},
					{
						icon: 'icon-daifahuo',
						count: 0
					},
					{
						icon: 'icon-daishouhuo',
						count: 0
					},
					{
						icon: 'icon-yiwancheng',
						count: 0
					}
				];
				this.orders = this.OrderCategory.map((item, index) => {
					return {
						...item,
						...orderExt[index]
					};
				});
			},
			//
			initServiceMenu() {
				this.services = [{
						id: '1',
						name: '领券中心',
						icon: 'icon-lingquanzhongxin',
						url: 'xj_user/coupon/index',
					},
					{
						id: '2',
						name: '流量中心',
						icon: 'icon-lingquanzhongxin',
						url: 'xj_distribution/index/transition',
					}, {
						id: '3',
						name: '门店中心',
						icon: 'icon-lingquanzhongxin',
						url: 'xj_tenant/index/transition',
					},
				];
			},
			//
			onRefreshPage() {
				//判断是否已登录
				this.isLogin = !!this.$store.getters.token;
				//获取页面数据
				if (this.isLogin) {
					this.getPageData();
				}
			},
			//获取页面数据
			getPageData: async function() {
				const app = this;
				app.isLoading = true;

				try {
					await app.getUser();
					await app.getMember();
					await app.getVip();
					await app.getTodoCounts();
					app.initFFC();
				} catch (e) {
					console.log('【获取页面数据数据失败】:', e)
				}
				app.isLoading = false;

				// //获取业务数据
				// Promise.all([app.getUser(), app.getMember(), app.getTodoCounts()])
				// 	.then(result => {
				// 		//
				// 		// this.nickname = result[0].name;
				// 		// 初始化订单操作数据
				// 		// app.initOrderTabbar();
				// 		app.initFFC();
				// 		// 执行回调函数
				// 		// callback && callback(); 
				// 	})
				// 	.catch(err => console.log('【获取页面数据数据失败】:', err))
				// 	.finally(() => {
				// 		console.log('刷新页面')
				// 		app.isLoading = false;
				// 	});
			},
			//获取用户
			getUser() {
				const app = this;
				return new Promise((resolve, reject) => {
					!app.isLogin ?
						resolve(null) :
						app.$store
						.dispatch('GetUser')
						.then(res => {
							app.user = res.obj;
							resolve(app.user);
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false;
								resolve(null);
							} else {
								this.$app.toast(err);
								reject(err);
							}
						});
				});
			},
			//获取会员
			getMember() {
				const app = this;
				return new Promise((resolve, reject) => {
					!app.isLogin ?
						resolve(null) :
						MemberApi.get()
						.then(res => {
							if (res.obj !== undefined) {
								app.member = res.obj;
							}
							console.log('用户会员 ：', app.member)
							resolve(app.member);
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false;
								resolve(null);
							} else {
								this.$app.toast(err);
								reject(err);
							}
						});
				});
			},
			async getVip() {
				if (this.member && this.member.vipId) {
					let res = await MemberApi.info(this.member.vipId);
					if (res.success) {
						this.vip = res.obj;
						console.log('加载会员信息：', this.vip);
					}
				}
			},
			//获取当前用户待处理的订单数量
			getTodoCounts() {
				const app = this;
				return new Promise((resolve, reject) => {
					!app.isLogin ?
						resolve(null) :
						MutilApi.stat()
						.then(res => {
							//赋值
							app.todoCounts.payment = res.obj.payAbles;
							app.todoCounts.deliver = res.obj.shippingAbles;
							app.todoCounts.received = res.obj.receiptAbles;
							app.todoCounts.refund = res.obj.refundsAbles;
							//
							app.todoRelates.productCount = res.obj.productCount;
							app.todoRelates.tenantCount = res.obj.tenantCount;
							app.todoRelates.couponCount = res.obj.couponCount;

							resolve(app.todoCounts);
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false;
								resolve(null);
							} else {
								reject(err);
							}
						});
				});
			},
			// //初始化订单操作数据
			// initOrderTabbar() {
			// 	const app = this;
			// 	const newOrderNavbar = [];
			// 	app.orderNavbar.forEach(item => {
			// 		if (item.count != undefined) {
			// 			item.count = app.todoCounts[item.value];
			// 		}
			// 		newOrderNavbar.push(item);
			// 	});
			// 	app.orderNavbar = newOrderNavbar;
			// },
			//初始化我的关注，收藏，优惠券
			initFFC() {
				const app = this;
				const newFFC = [];
				app.FFC.forEach(item => {
					// 数据角标
					if (item.thumbnail != undefined) {
						item.thumbnail = app.todoRelates[item.value];
					}
					newFFC.push(item);
				});
				app.FFC = newFFC;
			},
			//跳转到登录页
			handleLogin() {
				this.$app.navTo(this.pages.loginIndexPage);
			},
			//退出登录
			handleLogout() {
				const app = this;
				app.$app.confirm('您确定要退出登录吗?', () => {
					app.$store.dispatch('Logout', {}).then(
						result => {
							this.isLogin = !!this.$store.getters.token;
							this.initOrderMenu();
							this.initServiceMenu();
						}
					);
				});
			},
			//跳转到订单页
			toTargetOrder(item) {
				if (!this.isLogin) {
					this.handleLogin();
				} else {
					this.$app.navTo(this.pages.orderIndexPage, {
						flowState: item.name
					});
				}
			},
			//跳转到会员页
			toTargetMember() {
				if (!this.isLogin) {
					this.handleLogin();
				} else {
					this.$app.navTo(this.pages.memberIndexPage, {
						headimg: this.user.headimg,
						memberName: this.member.vipName
					});
				}
			},
			//跳转到我的相关
			toTargetFFC(item) {
				if (!this.isLogin) {
					this.handleLogin();
				} else {
					if (item.value == 'couponCount') {
						this.$app.navTo(item.url, {
							couponState: '未使用'
						});
						return
					}
					const userId = this.$store.getters.user.id;
					this.$app.navTo(item.url, userId);
				}
			},
			//跳转到我的相关
			toTargetPage(url) {
				if (!this.isLogin) {
					this.handleLogin();
				} else {
					const userId = this.$store.getters.user.id;
					this.$app.navTo(url, userId);
				}
			},
			//修改头像
			onChooseAvatar(e) {
				UserApi.updateHeadimg(e.detail.avatarUrl).then(result => {
					if (result.success) {
						this.$set(this.user, 'headimg', e.detail.avatarUrl);
						this.$app.toast('用户头像修改成功');
					}
				});
			},
			//修改昵称
			updateNickname() {
				if (this.nickname) {
					UserApi.updateName(this.nickname).then(result => {
						if (result.success) {
							this.$app.toast('用户昵称修改成功');
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		background: #FAFBFF;
		height: 100%;

		.custom-icon {
			height: 35rpx;
			width: 35rpx;
		}

		.user-head {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 444rpx;
			background-image: url("@/static/userBackgroup.png");
			background-repeat: no-repeat;
			/* 控制图片不重复 */
			background-size: cover;
			/* 调整图片大小以适应div尺寸 */
			/* 可选：以下属性用于对齐和定位图片 */
			background-position: center center;
			/* 居中对齐 */


			.head-content {
				display: flex;
				justify-content: space-between;
				margin-top: 124rpx;
				margin-left: 46rpx;
				margin-right: 46rpx;

				.content-profile {
					position: relative;
					width: 104rpx;
					height: 104rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10%;
					overflow: hidden;
					border: 2rpx solid #CCCCCC;
					background-color: #FFFFFF;

					.profile-headimg {
						position: relative;
						width: 104rpx;
						height: 104rpx;
					}

					.profile-avatar {
						position: relative;
						width: 72rpx;
						height: 60rpx;
						opacity: 0.3;
					}
				}

				.content-name {
					font-style: normal;
					font-weight: 600;
					font-size: 36rpx;
					line-height: 44rpx;
					color: #333333;
				}

				.content-level {
					margin-top: 6rpx;
					margin-right: 16rpx;
				}

				.content-member {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					width: 104rpx;
					height: 32rpx;
					background: #EDEDED;
					border-radius: 28rpx;
					margin-top: 6rpx;
				}

				.content-member-code {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					width: 130rpx;
					height: 44rpx;
					background: #D5EFF1;
					border-radius: 12rpx;
					font-size: 24rpx;
				}
			}
		}

		.user-card {
			position: relative;
			display: flex;
			flex-direction: column;
			height: 286rpx;
			// border: 1px solid #000000;
			border-radius: 20rpx;
			z-index: 10;
			overflow: hidden;
			margin-top: 282rpx;

			.card-background {
				border-radius: 20rpx;
				margin-left: 36rpx;
				margin-right: 36rpx;
				height: 164rpx;
				// border-radius: 20rpx 20rpx 100% 100%;
				//background-image: url("../../static/vipBackgrop.png");
				//background-repeat: no-repeat;
				/* 控制图片不重复 */
				//	background-size: cover;
				/* 调整图片大小以适应div尺寸 */
				/* 可选：以下属性用于对齐和定位图片 */
				//	background-position: center center;
				/* 居中对齐 */

				position: relative;
				overflow: hidden;

				.-bg {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					z-index: 1;

					image {
						width: 100%;
					}
				}

				.card-data {
					position: relative;
					z-index: 2;
				}
			}

			.card-show {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			// .card-remove {
			// 	margin-top: -10rpx;
			// }

			.card-level {
				margin-top: 24rpx;
				margin-left: 32rpx;
				margin-right: 20rpx;

				.userLevelCrown {
					height: 80rpx;
					width: 80rpx;
				}
			}

			.card-name {
				margin-top: 24rpx;
				color: $uni-text-color-inverse;
			}

			.card-button {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 152rpx;
				height: 48rpx;
				background: linear-gradient(140.86deg, #FFFFFF 4.69%, #FFE8D2 95.79%);
				box-shadow: 0px 6px 10px rgba(158, 158, 158, 0.15);
				border-radius: 32rpx;
				margin-top: 24rpx;
				margin-right: 32rpx;

			}

			.card-category {
				position: absolute;
				top: 78rpx;
				left: 0;
				right: 0;
				background-image: url();
				background-repeat: no-repeat;
				background-size: contain;
				background-position: top;
				width: 100%;
				padding: 50rpx 0rpx 0 0;
				z-index: 2;

				// height: 142rpx;
				// margin-top: 64rpx;
			}
		}

		.user-order {
			display: flex;
			flex-direction: column;
			margin-left: 32rpx;
			margin-right: 32rpx;
			height: 218rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);

			.order-head {
				display: flex;
				justify-content: space-between;
				margin-top: 26rpx;
				margin-left: 32rpx;
				margin-right: 32rpx;
			}

			.order-menu {
				display: flex;
				justify-content: space-between;
				margin-left: 78rpx;
				margin-right: 78rpx;
				padding-top: 42rpx;
				font-size: 24rpx;
			}
		}

		.user-feature {
			display: flex;
			justify-content: center;
		}

		.user-service {
			display: flex;
			flex-direction: column;
			margin-left: 32rpx;
			margin-right: 32rpx;
			height: 218rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.06);
			border-radius: 8rpx;
			margin-top: 24rpx;

			.service-head {
				display: flex;
				justify-content: space-between;
				margin-top: 26rpx;
				margin-left: 32rpx;
				margin-right: 32rpx;
			}

			.service-menu {
				display: flex;
				justify-content: space-between;
				margin-left: 78rpx;
				margin-right: 78rpx;
				padding-top: 42rpx;
				font-size: 24rpx;
			}
		}

		.user-bottom {
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			background: $uni-bg-color;
			padding: $xj-standard-padding;
			box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.06);
			border-radius: 8rpx;
			// border-bottom-right-radius: $xj-standard-border-radius;
			margin: 24rpx 32rpx;

			.bottom-line {
				width: 622rpx;
				height: 1rpx;
				background: #EEEEEE;
				margin: 30rpx 0rpx;
			}
		}
	}
</style>